import { selectDataApi } from "@/http/api"
import { Button } from "antd-mobile"
import { useEffect, useState } from "react"
import { useNavigate, useParams } from "react-router-dom"
import TypeItem from "./components/TypeItem"
import style from './select.module.less'
import { questionType2Text } from '@/utils'

const testTypes: TypeItemData[] = [
    { text: "全部", value: "all" },
    { text: "未做", value: "notdone" },
    { text: "已做", value: "done" },
    { text: "错误", value: "err" },
]

const testNums: TypeItemData[] = [
    { text: '5', value: '5' },
    { text: '10', value: '10' },
    { text: '20', value: '20' },
    { text: '30', value: '30' },
    { text: '50', value: '50' },
    { text: '100', value: '100' },
]


export default function Select() {
    const navigate = useNavigate();
    const [questionTypes, setQuestionTypes] = useState<TypeItemData[]>([]);
    const { actionCode } = useParams<{ actionCode: string }>()
    useEffect(() => {
        // 本来 params.actionCode ts 推导出 是 string | undefined
        // 但是我们自己是知道一定有的 ， 所以我们可以自己 转换为 string
        selectDataApi(actionCode as string).then(res => {
            if (res?.errCode === 0) {
                // 已经把中间的 题目分类 的数据从服务器获取回来了
                // 但是发现 只有英文，没有中文 ，所以需要我们转换一下
                // 目标： 把 后端返回的数据的 key ，本来是英文，要转换为 数组需要 value
                // 把后端返回的 value 变成 中文 + value 作为数组的 text
                // {key:'all' , value: 24}  ---> {text: '全部24' ,value : 'all'}
                const result = res.data.map(item => ({
                    text: questionType2Text[item.key] + item.value,
                    value: item.key
                }))
                setQuestionTypes(result);
            }
        })
    }, [])

    // 定义三个传递到 下一个页面的数据
    let testNum = 5;
    let testType = 'all';
    let questionType = 'all';
    // change 事件的处理函数，让子组件在点击的时候传递回来一个数据
    const change = (value: string) => {
        console.log(value)
    }

    return <div className={style.select}>
        <div className={style.flex}>
            <Button color="primary" onClick={() => navigate('/practice', {
                state: {
                    actionCode, testType, testNum, questionType
                }
            })} fill="solid">进行练习模式</Button>
            <Button color="warning" fill="solid">进行考试模式</Button>
        </div>
        <TypeItem title="试题分类" data={testTypes} onChange={value => testType = value} />
        <TypeItem title="题目分类" data={questionTypes} onChange={value => questionType = value} />
        <TypeItem title="试题数量" data={testNums} onChange={value => testNum = value as any as number} />
    </div>
}